<template>
    <div class="main">
            <el-card  style="margin:20px 0px">
            <!-- 表格 -->
            <el-table style="width:100%" border :data="skuList">
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column prop="skuName" label="名称" width="width"></el-table-column>
                <el-table-column prop="skuDesc" label="描述" width="width"></el-table-column>
                <el-table-column prop="prop" label="默认图片" width="110">
                    <template v-slot:default="{row}">
                        <div style="width: 50px;height: 50px;">
                        <img :src="row.skuDefaultImg" alt="" style="width:100%;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="weight" label="重量(KG)" width="80"></el-table-column>
                <el-table-column prop="price" label="价格(元)" width="80"></el-table-column>
                <el-table-column prop="prop" label="操作" width="width">
                    <template v-slot:default="{row}">
                               <!-- 当用户在使用我们封装的按钮的时候，需要向HintButton组件传递相应的参数（el-button进行二次封装） -->
                              <HintButton type="success" v-if="(row.isSale == 0)" icon="el-icon-top" size="mini" title="上架sku" @click="upOrDown(row)"></HintButton>
                              <HintButton type="info" v-else icon="el-icon-bottom" size="mini" title="下架sku" @click="upOrDown(row)"></HintButton>
                              <HintButton type="primary" icon="el-icon-edit" size="mini" title="修改sku" @click="editSku"></HintButton>
                              <HintButton type="warning" icon="el-icon-search" size="mini" title="查看详情" @click="lookSkus(row)"></HintButton>
                              <el-popconfirm :title="`确定删除该属性吗?`">   
                                <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除spk" slot="reference"></HintButton>
                              </el-popconfirm>
                    </template>
                </el-table-column>
            <!-- 分页器 -->
            </el-table>
            <el-pagination 
                    style="margin-top: 20px;text-align: center;"
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page="currentPage"
                    :page-sizes="[5,10,20,30]" 
                    :page-size="limit"
                    layout="prev, pager, next, jumper, ->,sizes,total" 
                    :total="total"
                    :pager-count=5
                    >
            </el-pagination>
           </el-card>
            <el-drawer 
               :title="`${lookSkuList.skuName}的详情信息`" 
               :visible.sync="drawer" 
               :before-close="handleClose"
               size="40%"
               >
                <el-row>
                    <el-col :span="5">
                            <span class="sku_title">SKU名称：</span>
                    </el-col>
                    <el-col :span="16">
                            <span class="sku_text">{{lookSkuList.skuName}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                            <span class="sku_title">SKU描述：</span>
                    </el-col>
                    <el-col :span="16">
                            <span class="sku_text">{{lookSkuList.skuDesc}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                            <span class="sku_title">价格：</span>
                    </el-col>
                    <el-col :span="16">
                            <span class="sku_text">{{lookSkuList.price}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                            <span class="sku_title">平台属性：</span>
                    </el-col>
                    <el-col :span="16">
                        <el-tag style="margin:0px 5px 5px" size="mini" v-for="(attr) in lookSkuList.skuAttrValueList" :key="attr.id">{{attr.attrName}}-{{attr.valueName}}</el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                            <span class="sku_title">商品图片：</span>
                    </el-col>
                    <el-col :span="16">
                        <div style="overflow:hidden;border: 1px #72767b solid;">
                            <!-- <img :src="lookSkuList.skuDefaultImg" alt="" style="width:100%"> -->
                            <el-carousel height="450px">
                                <el-carousel-item v-for="(item) in lookSkuList.skuImageList" :key="item.id">
                                    <img :src="item.imgUrl" alt="" style="width:100%">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                </el-row>
            </el-drawer>
    </div>
</template>

<script>
export default {
      name:'tradeMark',
      data() {
        return {
            // 代表的分页器第几页
            currentPage:1,
            // 总数据条数
            total:0,
            // 当前页数展示数据条数
            limit:5,
            //存放展示的sku基础数据
            skuList:[],
            //存放查看详情信息
            lookSkuList:[],

            //抽屉展示参数
            drawer: false, //显示/隐藏控制
            direction: 'rtl', //显示方向（右侧）
        }
      },
      methods: {
         //分页器
        handleSizeChange(val) {
            //修改当前页展示数据条数
            //   console.log(val);
              this.limit = val
              this.getSkuListData()
          },
        handleCurrentChange(val) {
            //获取当前页，重新发送请求，刷新页面
            // console.log(val);
            this.getSkuListData(val)
         },
        //获取sku基础数据列表
        async  getSkuListData(pager = 1){
            this.currentPage = pager;
            //解构出参数
            const {currentPage,limit} = this;
            let result = await this.$API.sku.reqSkuBaseList(currentPage,limit)
            if(result.code ==200){
                this.total = result.data.total
                this.skuList = result.data.records
            }
            console.log("获取sku基础信息",result);
          },
        //切换上架和下架的回调
        async  upOrDown(row){
            //判断是下架还是上架,如果isSale == 0说明没有销售，待上架进行销售，isSale == 1说明正在销售，可进行下架操作
            if(row.isSale == 0){
                //获取skuId，发送上架请求
                const onSaleResult = await this.$API.sku.reqOnSale(row.id)
                if(onSaleResult.code == 200){
                    row.isSale = 1;
                    //成功，重新获取当前页sku的信息列表
                    this.getSkuListData(this.currentPage)
                }
            }else{
                //获取skuId，发送下架请求
                const cancelSaleResult = await this.$API.sku.reqCancelSale(row.id)
                if(cancelSaleResult.code == 200){
                     row.isSale = 0;
                     //成功，重新获取当前页sku的信息列表
                     this.getSkuListData(this.currentPage)
                }
            
            }
          },
        //编辑sku基础信息---正在开发中
        editSku(){
             this.$message({
                 type:'warning',
                 message:'该功能正在开发中,敬请期待...'  
             })
          },
        //查看详情
        async lookSkus(row){
            const result = await this.$API.sku.reqSkuById(row.id)
           if(result.code == 200){
                    this.lookSkuList = result.data
                    this.drawer = true
           }
        },
        //关闭抽屉弹窗
        handleClose(done) {
              this.$confirm('确认关闭？')
                  .then(_ => {
                      done();
                    // 关闭弹窗时清除数据
                    this.lookSkuList = []
                  })
                  .catch(_ => { });
          }
      },
      mounted(){
            this.getSkuListData()
      }
}
</script>

<style>
   /*  .el-carousel__button{
     width:8px;
     height:8px;
     background-color:#409EFF;
     border-radius: 50%;
    } */
</style>
<style scoped lang="scss">
        .el-row .el-col-5{
            font-size: 16px;
            font-weight: 600;
            text-align: right;
        }
        .el-col{
            margin:10px 10px;
       }
    ::v-deep .el-carousel__button{
     width:8px;
     height:8px;
     /* background-color:#72767b; */
     background-color:#409EFF;
     border-radius: 50%;
    }
</style>